<template>
	<view class="content">
		<!-- 模糊背景 -->
		<img class="bgfilter" src="https://lesson.iapeap.com/seleepbg.png" alt="" />
		<!-- 内容盒子 -->
		<view class="box">
			<!-- 用户头像区域 -->
			<view class="avatar-section">
				<button class="imglogo" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
					:style="{ backgroundImage: 'url(' + avatar_url + ')', backgroundSize: 'cover' }"></button>
				<text class="avatar-text">点击修改头像</text>
			</view>
			<!-- 页面内容⬇️ -->
			<view class="usermsg">
				<view class="msgbox">
					<view class="label">
						<view class="labelitem">
							<view class="labelitem-l">
								<van-icon name="user-o" size="16px" color="#5c84c6" />
								<text>昵称</text>
							</view>
							<input type="nickname" class="labelitem-r" placeholder="请输入昵称" v-model="nickname"
								@blur="bindblur" />
						</view>
						<van-divider />

						<view class="labelitem">
							<view class="labelitem-l">
								<van-icon name="contact" size="16px" color="#5c84c6" />
								<text>姓名</text>
							</view>
							<input type="text" class="labelitem-r" placeholder="请输入姓名" v-model="name" />
						</view>
						<van-divider />

						<view class="labelitem">
							<view class="labelitem-l">
								<van-icon name="friends-o" size="16px" color="#5c84c6" />
								<text>性别</text>
							</view>
							<view class="gender-options">
								<view class="gender-option" :class="{ active: sex === '男' }" @click="sex = '男'">
									<van-icon name="male" size="16px" />
									<text>男</text>
								</view>
								<view class="gender-option" :class="{ active: sex === '女' }" @click="sex = '女'">
									<van-icon name="female" size="16px" />
									<text>女</text>
								</view>
							</view>
						</view>
						<van-divider />

						<view class="labelitem">
							<view class="labelitem-l">
								<van-icon name="calendar-o" size="16px" color="#5c84c6" />
								<text>生日</text>
							</view>
							<input type="text" class="labelitem-r" :disabled="true" placeholder="请选择出生日期"
								v-model="birthday" @click="opentime" />
							<van-icon name="arrow" size="16px" color="#999" />
						</view>

						<view class="sbm">
							<button @click="submit" class="submit-btn">保存修改</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<van-datetime-picker v-if="showtime" type="date" :value="currentDate" :min-date="minDate" :max-date="maxDate"
			@confirm="confirm" @cancel="cancel" />
	</view>
</template>

<script>
	import {
		updateInformation,
	} from "../../utils/getDate.js"

	export default {
		data() {
			// 从缓存获取用户信息或设置默认值
			const userInfo = uni.getStorageSync("userinfo") || {};
			const defaultDate = userInfo.birthday ? new Date(userInfo.birthday) : new Date('2000-01-01');

			return {
				birthday: userInfo.birthday || '',
				avatar_url: userInfo.avatar_url || "https://lesson.iapeap.com/images/EmotionalValue/mrtx.png",
				addtime: userInfo.addtime || '',
				id: userInfo.id || 0,
				name: userInfo.name || '',
				nickname: userInfo.nickname || '',
				phone: userInfo.phone || '',
				role: userInfo.role || 0,
				sex: userInfo.sex || '男',
				status: userInfo.status || 0,
				minDate: new Date(1900, 0, 1).getTime(), // 最小日期1900-01-01
				maxDate: new Date().getTime(), // 最大日期今天
				currentDate: defaultDate.getTime(), // 当前选中日期
				showtime: false,
			};
		},

		methods: {
			// 打开日期选择器
			opentime() {
				// 如果有已设置的生日，转换为时间戳
				if (this.birthday) {
					this.currentDate = new Date(this.birthday).getTime();
				}
				this.showtime = true;
			},

			// 确认选择日期
			confirm(e) {
				const date = new Date(e.detail);
				// 格式化为YYYY-MM-DD
				this.birthday =
					`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
				this.showtime = false;
			},

			// 取消选择
			cancel() {
				this.showtime = false;
			},

			// 其他方法保持不变...
			onChooseAvatar(e) {
				const tempFilePath = e.detail.avatarUrl;
				const maxSizeInBytes = 1024 * 1024;

				uni.getFileInfo({
					filePath: tempFilePath,
					success: res => {
						if (res.size > maxSizeInBytes) {
							uni.showToast({
								title: '请上传小于1MB的图片',
								icon: 'none'
							});
							return;
						}
						this.avatar_url = tempFilePath;
						uni.uploadFile({
							url: 'https://applet.eapchina.net/api/sleep/uploadFile',
							filePath: tempFilePath,
							name: 'file',
							success: (res) => {
								const data = JSON.parse(res.data);
								this.avatar_url = data.imgUrl || tempFilePath;
							}
						});
					},
				});
			},

			bindblur(e) {
				this.nickname = e.detail.value;
			},

			submit() {
				let data = {
					id: this.id,
					role: this.role,
					avatar_url: this.avatar_url,
					phone: this.phone,
					birthday: this.birthday,
					sex: this.sex,
					name: this.name,
					nickname: this.nickname,
					status: this.status,
					addtime: this.addtime
				}

				updateInformation(data).then(res => {
					if (res.state === "ok") {
						uni.showToast({
							title: "修改成功",
							icon: "success"
						});
						// 更新本地存储的用户信息
						uni.setStorageSync("userinfo", res.user);

						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					} else {
						uni.showToast({
							title: res.msg || "修改失败",
							icon: "none"
						});
					}
				}).catch(err => {
					uni.showToast({
						title: "请求失败，请检查网络",
						icon: "none"
					});
				});
			}
		}
	};
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		position: relative;
		background-color: #f5f7fa;
	}

	.box {
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 1;
	}

	.bgfilter {
		width: 100%;
		height: 300rpx;
		filter: blur(10px);
		position: relative;
		top: 0;
		z-index: 0;
		object-fit: cover;
	}

	.avatar-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40rpx;
		position: relative;
		z-index: 2;

		.imglogo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			border: 4rpx solid #fff;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			background-color: #fff;
			background-size: cover;
			background-position: center;
		}

		.avatar-text {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #fff;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}
	}

	.msgbox {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100%;
		margin-top: 120rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
	}

	.label {
		.labelitem {
			display: flex;
			align-items: center;
			padding: 30rpx 0;

			.labelitem-l {
				display: flex;
				align-items: center;
				width: 150rpx;
				font-size: 28rpx;
				color: #666;

				text {
					margin-left: 10rpx;
				}
			}

			.labelitem-r {
				flex: 1;
				font-size: 30rpx;
				color: #333;
				padding: 10rpx 0;
				border: none;
				outline: none;
			}

			.van-icon-arrow {
				margin-left: 20rpx;
			}

			.gender-options {
				flex: 1;
				display: flex;
				gap: 20rpx;

				.gender-option {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 12rpx 0;
					border-radius: 8rpx;
					border: 1rpx solid #ddd;
					color: #666;
					font-size: 28rpx;

					text {
						margin-left: 8rpx;
					}

					&.active {
						background-color: #f0f7ff;
						border-color: #5c84c6;
						color: #5c84c6;
					}
				}
			}
		}
	}

	.van-divider {
		margin: 0 !important;
	}

	.sbm {
		margin-top: 80rpx;

		.submit-btn {
			height: 90rpx;
			line-height: 90rpx;
			background: linear-gradient(135deg, #5c84c6, #6a8fd3);
			width: 50%;
			border-radius: 45rpx;
			color: #fff;
			font-size: 32rpx;
			border: none;
			box-shadow: 0 4rpx 16rpx rgba(92, 132, 198, 0.3);
			transition: all 0.3s;

			&:active {
				transform: scale(0.98);
				opacity: 0.9;
			}
		}
	}

	.van-datetime-picker {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}
</style>